<template>
  <el-tabs v-if="typeList.length>1" v-model="tab">
    <el-tab-pane v-for="(row,i) in typeList" :label="row._title_ || titleMap[row._type_]" :name="i">
      <unite-param v-bind="row" :model-value="modelValue" @update:modelValue="$emit('update:modelValue',$event)" @change="$emit('change',$event)"></unite-param>
    </el-tab-pane>
  </el-tabs>
  <unite-param v-else-if="typeList.length" v-bind="typeList[0]" :model-value="modelValue" @update:modelValue="$emit('update:modelValue',$event)" @change="$emit('change',$event)"></unite-param>
</template>

<script>
import UnifyParam from "./UnifyParam.vue";
import {getComponentConfigMap} from "./UnifyParam.vue";
import {ref} from "vue";

const titleMap = ref({});

getComponentConfigMap().then(map=>{
  Object.values(map).forEach(row=>{
    titleMap.value[row.name] = row.title || row.name;
  })
})

export default {
  components: {UniteParam: UnifyParam},
  props: {
    _type_: Array,
    name: {type:String, default:''},
    modelValue: {type:[String,Number,Object,Array], default:''},
  },
  emits: ['update:modelValue', 'change'],
  data(){
    return {
      tab: 0,
      titleMap: titleMap
    }
  },
  methods: {
    onChange(data){
      this.$emit('update:modelValue', data);
      this.$emit('change', data);
    }
  },
  computed: {
    typeList(){
      let res = [];
      this._type_.forEach((item)=>{
        item = typeof item === 'string' ? {_type_:item} : item;
        if (typeof item !== 'object') return;
        let label = item.label;
        let resRow = Object.assign({}, this.$attrs, item, {name:''});
        delete resRow['modelValue'];
        item._type_ = item._type_ || item.type; //TODO 兼容处理
        resRow.label = label;
        res.push(resRow);
      })
      return res;
    }
  },
  mounted() {

  }
}
</script>

<style scoped>

</style>